<template>
  <el-form ref="activityRemarkRefForm" :model="activityRemarkQuery" label-width="120px" :rules="activityRemarkRules">
    <el-form-item label="ID">
      <div class="desc">{{activityDetail.id}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="负责人">
      <div class="desc"> {{activityDetail?.ownerDO?.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="活动名称">
      <div class="desc">{{activityDetail.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="开始时间">
      <div class="desc">{{activityDetail.start_time}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="结束时间">
      <div class="desc">{{activityDetail.end_time}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="活动预算">
      <div class="desc">{{activityDetail.cost}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="活动描述">
      <div class="desc">{{activityDetail.description}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="创建时间">
      <div class="desc">{{activityDetail.create_time}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="创建人">
      <div class="desc">{{activityDetail?.createByDO?.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="编辑时间">
      <div class="desc">{{activityDetail.edit_time}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="编辑人">
      <div class="desc">{{activityDetail?.editByDO?.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="填写备注" prop="note_content">
      <el-input
          v-model="activityRemarkQuery.note_content"
          :rows="8"
          type="textarea"
          placeholder="请输入活动备注"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="activityRemarkSubmit">提 交</el-button>
      <el-button @click="goBack(router)">返 回</el-button>
    </el-form-item>
  </el-form>

  <el-table
      :data="activityRemarkList"
      style="width: 100%">
    <el-table-column type="index" label="序号" width="60"/>
    <el-table-column prop="note_content" label="备注内容"/>
    <el-table-column property="create_time" label="备注创建时间"/>
    <el-table-column property="createByDO.name" label="创建人"/>
    <el-table-column property="edit_time" label="编辑时间"/>
    <el-table-column property="editByDO.name" label="编辑人"/>
    <el-table-column label="操作">
      <template #default="scope">
        <a href="javascript:" @click="edit(scope.row.id)">编辑</a>
        &nbsp;
        <a href="javascript:" @click="del(scope.row.id)">删除</a>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      v-model:current-page="currentPage"
  />

  <!--活动备注记录的弹窗-->
  <el-dialog v-model="activityRemarkDialogVisible" title="编辑市场活动备注记录" width="55%" center draggable>
    <el-form ref="editActivityRemarkRefForm" :model="editNoteContent" label-width="110px" :rules="editActivityRemarkRules">
      <el-form-item label="活动备注" prop="note_content">
        <el-input
            v-model="editNoteContent.note_content"
            :rows="8"
            type="textarea"
            placeholder="请输入活动备注"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="activityRemarkDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="editActivityRemarkSubmit">提 交</el-button>
      </span>
    </template>

  </el-dialog>

</template>

<script setup>
import {inject, onMounted, reactive, ref, watch} from "vue";
import {goBack, messageTip} from "../util/util.js";
import {useRoute, useRouter} from "vue-router";
import {doGet, doPost, doPut} from "../http/httpRequest.js";

let router = useRouter();
let route = useRoute();
let reload = inject("reload");

let activityDetail = ref({});
let activityRemarkList = ref([{}]);
let activityRemarkQuery = reactive({
  note_content : ''
});
let editActivityRemarkQuery = reactive({});
let editNoteContent = reactive({});

let pageSize = ref();
let total = ref();
let currentPage = ref();

let activityRemarkRefForm = ref();
let editActivityRemarkRefForm = ref();

let activityRemarkDialogVisible = ref(false);


//填写备注验证规则
let activityRemarkRules = {
  note_content : [
    { required: true, message: '请输入活动备注', trigger: 'blur' },
    { min: 5, max: 255, message: '活动备注长度为5-255个字符', trigger: 'blur' }
  ]
}
//编辑活动备注的验证规则
let editActivityRemarkRules = {
  note_content : [
    { required: true, message: '请输入活动备注', trigger: 'blur' },
    { min: 5, max: 255, message: '活动备注长度为5-255个字符', trigger: 'blur' }
  ]
}

onMounted(()=>{
  getActivityDetail(route.params.id);
  loadActivityRemarkList(1);
})
watch(currentPage,(newPage)=>{
  console.log("当前页变化：",newPage);
  toPage(newPage);
})
const toPage = (newPage) => {
  loadActivityRemarkList(newPage);
}

//获得当前市场活动的信息
const getActivityDetail = (id) => {
  doGet("/api/activity/"+id,{}).then((resp)=>{
    console.log(resp);
    if(resp.data.code === 200) {
      activityDetail.value = resp.data.data;
    }
  })
}
//提交备注
const activityRemarkSubmit = () => {
  activityRemarkRefForm.value.validate((isValid) => {
    if (isValid) {
      let formData = new FormData();
      formData.append("activity_id",activityDetail.value.id);
      formData.append("note_content",activityRemarkQuery.note_content)
      doPost("/api/activity/remark",formData).then(resp => {
        if (resp.data.code === 200) {
          messageTip("提交成功", "success");
          //刷新
          reload();
        } else {
          messageTip("提交失败", "error");
        }
      })
    }
  })
}
//获取当前市场活动的备注列表
const loadActivityRemarkList = (current) => {
  doGet("api/activity/remark",{
    current : current,
    activity_id : route.params.id
  }).then((resp)=>{
    console.log(resp);
    if(resp.data.code === 200){
      activityRemarkList.value = resp.data.data.records;
      pageSize = resp.data.data.size;
      total = resp.data.data.total;
    }
  })
}
//编辑备注记录
const edit = (id) => {
  activityRemarkDialogVisible.value = true;
  doGet("/api/activity/remark/" + id, {}).then(resp => {
    console.log(resp);
    if (resp.data.code === 200) {
      editActivityRemarkQuery = resp.data.data;
    }
  })
}
//提交编辑的备注记录
const editActivityRemarkSubmit = () => {
  editActivityRemarkRefForm.value.validate((isValid)=>{
    if(isValid){
      let formData = new FormData();
      formData.append("id",editActivityRemarkQuery?.id);
      formData.append("note_content",editNoteContent.note_content);
      doPut("/api/activity/remark",formData).then((resp)=>{
        if(resp.data.code === 200){
          messageTip("编辑成功","success");
          reload();
        }else{
          messageTip("编辑失败","error");
        }
      })
    }
  })
}
//删除市场活动
const del = (id) => {}
</script>
<style scoped>
.desc {
  background-color: #F0FFFF;
  width: 100%;
  padding-left: 15px;
}
</style>